/*
 * @Author: taoyuqing
 * @Date: 2023-01-14 00:35:07
 * @Description: 菜单
 */
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:spree/widgets/vip_content_box.dart';

class ProfileMenu extends StatefulWidget {
  final List menuList;
  final Function? ontap;
  final String? menuTitle;
  ProfileMenu({Key? key, required this.menuList, this.ontap, this.menuTitle})
      : super(key: key);

  @override
  State<ProfileMenu> createState() => _ProfileMenuState();
}

class _ProfileMenuState extends State<ProfileMenu> {
  @override
  Widget build(BuildContext context) {
    return VipContentBox(
      padding: EdgeInsets.all(0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 20, top: 20),
            child: Text(
              widget.menuTitle ?? '',
              style: TextStyle(color: Colors.white),
            ),
          ),
          GridView(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4, //横轴三个子widget
                  childAspectRatio: 1.0 //宽高比为1时，子widget
                  ),
              children: _createMenus())
        ],
      ),
    );
  }

  // 创建菜单
  List<Widget> _createMenus() {
    return widget.menuList.map((item) {
      return _iconButton(
          icon: item['icon'],
          name: item['name'],
          alias: item['alias'],
          onTap: () {
            if (widget.ontap != null) {
              widget.ontap!(item);
            }
          });
    }).toList();
  }

  Widget _iconButton(
      {required Widget icon,
      required String name,
      required String alias,
      Function? onTap}) {
    return GestureDetector(
      onTap: () {
        if (onTap != null) {
          onTap();
        }
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 30,
            height: 30,
            child: icon,
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            child: Text(
              name,
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      ),
    );
  }
}
